<template>
  <div>
    <el-dialog title="收款管理" v-model="showDialog" :width="dialogWidth" :close-on-click-modal="false">
      <div class="bigTitle">收款信息</div>
      <el-form label-width="120px" class="baseForm" :rules="rules" :model="form" ref="baseForm">
        <el-form-item label="项目名称" class="item" prop="projectName">
          <el-input v-model="form.projectName" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" class="item" prop="customerName">
          <el-input v-model="form.customerName" class="form-input" @focus="checkCustomer"></el-input>
        </el-form-item>
        <el-form-item label="收款方式" class="item" prop="receiveTypeId">
          <el-select v-model="form.receiveTypeId" placeholder="请选择">
            <el-option v-for="item in types" :key="item.id" v-key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款金额" class="item" prop="money">{{ form.money }}元</el-form-item>
        <el-form-item label="收款日期" class="item" prop="receiveDate">
          <el-date-picker v-model="form.receiveDate" type="date" value-format="YYYY-MM-DD" placeholder="选择收款日期" />
        </el-form-item>
        <el-form-item label="经手人" class="item" prop="salerName">
          <el-input v-model="form.salerName" class="form-input" @focus="checkSaler"></el-input>
        </el-form-item>
        <el-form-item label="归属部门" class="item" prop="orgId">
          <el-select v-model="form.orgId" placeholder="请选择">
            <el-option v-for="item in orgs" :key="item.id" v-key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" class="item" prop="note">
          <el-input v-model="form.note" class="form-input"></el-input>
        </el-form-item>
      </el-form>
      <div class="bigTitle">合同信息</div>
      <el-table :data="tables" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="contractCode" label="合同编号" width="100"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="leastMoney" label="应收金额" width="100" :formatter="(...arr) => arr[2] + '元'"></el-table-column>
        <el-table-column label="收款金额" width="180">
          <template #default="scope">
            <el-input v-model="scope.row.money" type="number" size="mini">
              <template #append>元</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="scope">
            <el-input v-model="scope.row.note" size="mini" />
          </template>
        </el-table-column>
        <el-table-column label="" width="60">
          <template #default="scope">
            <el-button icon="el-icon-remove" @click.stop="removeClick(scope.index)" size="mini"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click.stop="create_contractClick">新建合同</el-button>
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="saveAddClick">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <dialog-customer ref="r_customer"></dialog-customer>
    <dialog-saler ref="r_saler"></dialog-saler>
    <dialog-contract ref="r_contract"></dialog-contract>
  </div>
</template>
<script>
import DialogCustomer from '../../components/dialog_customer.vue'
import DialogSaler from '../../components/dialog_saler.vue'
import DialogContract from '../../components/dialog_contract.vue'
const rules = {
  projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  customerName: [{ required: true, message: '请选择客户', trigger: 'change' }],
  receiveTypeId: [
    { required: true, message: '请选择收款方式', trigger: 'change' },
    {
      validator(_, value, callback) {
        if (value == 0) return callback(new Error('请选择收款方式'))
        callback()
      },
      trigger: 'change',
    },
  ],
  money: [
    {
      required: true,
      validator(_, value, callback) {
        if (!value) return callback(new Error('请输入有效的收款金额'))
        callback()
      },
      trigger: 'blur',
    },
  ],
  receiveDate: [{ required: true, message: '请选择收款日期', trigger: 'blur' }],
  salerName: [{ required: true, message: '请选择经手人', trigger: 'change' }],
  orgId: [{ required: true, message: '请选择归属部门', trigger: 'change' }],
}
export default {
  components: { DialogCustomer, DialogSaler, DialogContract },
  data() {
    ''
    return {
      dialogWidth: window.innerWidth > 780 ? '1050px' : '100%',
      showDialog: false,
      form: {},
      types: [],
      orgs: [],
      rules,
      tables: [],
    }
  },
  watch: {
    tables: {
      handler(v) {
        this.form.money = this.tables.reduce((a, b) => a + +b.money, 0)
      },
      deep: true,
    },
  },
  methods: {
    showdata(row) {
      this.tables = []
      this.form = Object.assign({ projectName: '', customerId: 0, customerName: '', receiveTypeId: 0, receiveTypeName: '', money: 0, receiveDate: '', salerId: 0, salerName: '', orgId: '', orgName: '', note: '' }, row || {})

      this.showDialog = true
    },
    checkCustomer({ target }) {
      this.$refs.r_customer.show().then(({ id, name }) => {
        this.form.customerId = id
        this.form.customerName = name
      })
      target.blur()
    },
    checkSaler({ target }) {
      this.$refs.r_saler.show().then(({ id, name }) => {
        this.form.salerId = id
        this.form.salerName = name
      })
      target.blur()
    },
    create_contractClick() {
      var noids = this.tables.map((z) => z.contractId).join(',')
      this.$refs.r_contract.show(noids).then((data) => {
        const { contractCode, contractId, leastMoney, projectName } = data
        this.tables.push({
          contractCode,
          contractId,
          leastMoney,
          projectName,
          money: leastMoney,
        })
      })
    },
    removeClick(index) {
      this.tables.splice(index, 1)
    },
    saveAddClick() {
      this.$refs.baseForm.validate((v) => {
        if (!v) return
        if (this.tables.length == 0) return this.$message.warning('请选择合同信息')
        let obj = this.tables.find((z) => z.money <= 0)
        if (obj) return this.$message.warning(`合同【${obj.contractCode}】收款金额不正确`)
        let obj1 = this.tables.find((z) => z.money > z.leastMoney)
        if (obj1) return this.$message.warning(`合同【${obj1.contractCode}】收款金额不能大于应收金额`)
        var form = Object.assign({}, this.form, { contracts: this.tables })
        // var form = Object.assign({}, this.form)
        form.money = +form.money
        this.$api.receivemoney.add(form).then(({ state, msg }) => {
          this.$message[state ? 'success' : 'warning'](msg)
          if (state) {
            this.showDialog = false
            this.$emit('search')
          }
        })
      })
    },
  },
  mounted() {
    this.$api.dictionary.enums(3).then(({ msg }) => {
      this.orgs = msg
    })
    this.$api.dictionary.enums(4).then(({ msg }) => {
      this.types = msg
    })
  },
}
</script>
<style scoped lang="scss">
.baseForm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.bigTitle {
  font-size: 18px;
  text-indent: 40px;
  padding: 20px 0;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  background: #00000005;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
</style>
